<template>
  <div class="header">
    <div class="header-goBack" @click="onBack">
      <img class="backButton" src="../../../img/backButton.png" />
    </div>
    <div class="header-title">登录</div>
  </div>
  <div class="main">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div class="forgetPassword">忘记密码</div>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  name: "login",
};
</script>
<script setup>
import { ref } from "vue";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
// 如果验证规则通过，则调用 userStore 中的 getUserInfo 函数
// await userStore.getUserInfo({ access, password });
// 用户信息就会存在pinia里面

const username = ref("");
const password = ref("");
const onSubmit = (values) => {
  console.log("submit", values);
  userStore.getUserInfo({ access: username.value, password: password.value });
  console.log(username.value, password.value);
};
const onBack = () => {
  window.history.back();
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 44px;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  &-goBack {
    height: 30px;
    position: absolute;
    top: 5px;
    left: 5px;
    img {
      width: 30px;
    }
  }
  &-title {
    font-size: 18px;
    color: #333333;
    text-align: center;
    width: 100%;
    height: 44px;
    line-height: 44px;
  }
}
.main {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.van-form {
  // background-color: #333333;
  width: 80%;
}
.forgetPassword {
  width: 100%;
  text-align: right;
  color: #1989fa;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
